<template>
    <div class="roombox">
        <el-row :gutter="10">
            <!-- 左边 -->
            <el-col :span="4">
                <!-- 练习室 -->
                <el-card shadow="always">
                    <el-menu default-active="1-1">
                        <el-sub-menu class="ResourceDynamicItem" index="1" :class="{'active':flag==1}">
                            <template #title>
                                <div class="betray" :class="{'active': flag==1}">
                                    <span>练习室</span>
                                </div>
                            </template>
                            <el-menu-item @click="hanlderroom" index='1-1'>我的练习室</el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-card>
                <!-- 缓存 -->
                <el-card shadow="always" style="margin-top:10px">
                    <div class="listContainer">
                        <div class="listItem " :class="{'active': flag==3}">
                            <span>缓存</span>
                        </div>
                        <div class="listItem" :class="{'active': flag==4}">
                            <span>音频库</span>
                        </div>
                        <div class="listItem" @click="storehandler" :class="{'active': flag==5}">

                            <span>收藏</span>
                        </div>
                        <div class="listItem" @click="handlerhistory" :class="{'active': flag==2}">
                            <span>历史</span>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <!-- 右边 -->
            <el-col :span="20">
                <router-view></router-view>
                <!-- 来存放内部组件 -->
                <!-- <myroom  />
                <hostory  />
                <store  /> -->
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import myroom from './roomItem/myroom.vue'
import hostory from './roomItem/history.vue'
import store from './roomItem/store.vue'
import router from '../../router/index'
import useRoomstore from '../../stores/room'
const Roomstore = useRoomstore()
const flag = ref<number>(1)
// 点击切换练习室组件
const hanlderroom = () => {
    flag.value = 1
    // 跳转路由
    router.push({
        path: '/room/myroom'
    })
}
// 点击切换收藏组件
const storehandler = () => {
    // 跳转路由
    router.push({
        path: '/room/store'
    })
}
// 点击切换历史记录
const handlerhistory = () => {
    Roomstore.handlerhistory()
    flag.value = 2
    // 跳转路由
    router.push({
        path: '/room/history'
    })
}

</script>

<style scoped>
.roombox {
    margin: 0 auto;
    width: 1200px;
    margin-top: 20px;
}

>>>.el-row {
    width: 1200px;
}

.el-menu {
    border-right: none !important;
    margin-left: -20px !important;
}

.el-menu span {
    margin-left: 3px !important;
}

.el-menu-item {
    height: 40px;
    margin-left: 35px !important;
}

.el-menu-item.is-active {
    color: #F93684 !important;
}

.el-sub-menu__title {
    height: 42px !important;
}

.el-sub-menu__title {
    background-color: white !important;
}

.ResourceDynamicItem .betray {
    padding-left: 20px;
}

.ResourceDynamicItem .active {
    border-left: 3px solid #F93684;
}


>>>.el-card__body {
    padding: 0;
}

.listContainer {
    height: 210px;
}

.listContainer .listItem {
    height: 45px;
    border-left: 3px solid white;
}

.listContainer .listItem:hover {
    border-left: 3px solid #F93684
}

.listContainer .active {
    border-left: 3px solid #F93684;
}

.listContainer .listItem span {
    font-size: 14px;
    color: #111;
    padding: 17px 21px;
    cursor: pointer;
    position: relative;
    display: block;
    text-decoration: none;
}
</style>